<template>
  <div>
    <ShareCard :loading="isLoading" :cardData="cardData" :showTitle="showTitle">
      <template #title>
        <div> <Icon :icon="icon" :size="18" v-if="icon" class="mr-2" />{{ header }}</div>
      </template>
      <div>
        <div
          v-for="(item, index) in dataSource"
          :key="index"
          class="flex pt-2 pb-2"
          style="border-bottom: 1px solid #f0f0f0; width: 100%"
        >
          <div class="flex items-center justify-center" style="width: 20%">
            <div class="w-50px h-80px flex items-center justify-center">
              <Icon :icon="item.icon" v-if="item.icon" />
            </div>
          </div>
          <div style="width: 80%">
            <div class="color">{{ item['title'] }}</div>
            <div class="flex jusify-between w-full">
              <div v-if="item['firstNameUse']" style="width: 50%">
                <div class="num">{{ item['firstNum'] }}{{ item['firstUnit'] }}</div>
                <div class="color"> {{ item['firstName'] }} </div>
              </div>
              <div v-if="item['secondNameUse']" style="width: 50%">
                <div class="num">{{ item['secondNum'] }}{{ item['firstUnit'] }}</div>
                <div class="color"> {{ item['secondName'] }} </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ShareCard>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref, onMounted } from 'vue';
  import ShareCard from './ShareCard.vue';
  import { getFlowGetMiniStateByTypeCode } from '/@/api/process/process';
  import { isArray } from '/@/utils/is';
  import { useMessage } from '/@/hooks/web/useMessage';
  import Icon from '/@/components/Icon';
  const props = defineProps({
    loading: Boolean,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
    icon: {
      type: String as PropType<string>,
      default: '',
    },
    pageSize: {
      type: Number,
      default: 6,
    },
    pagination: {
      type: Boolean,
      default: true,
    },
    header: {
      type: String as PropType<string>,
      default: '',
    },
    cardData: {
      type: Object as PropType<object>,
      default: () => {
        return {};
      },
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
  });
  const { createMessage } = useMessage();
  const isLoading = ref(false);
  const flow_statistics = ref<Recordable[]>([]);
  const cardDataObj = ref<Recordable>({});
  const dataSource = ref<Recordable[]>([]);
  const typeCodes = ref('');
  const fetch = async () => {
    console.log('cardData', props.cardData);
    typeCodes.value = '';
    cardDataObj.value = props.cardData;
    if (
      cardDataObj.value?.meta?.flow_statistics &&
      isArray(cardDataObj.value?.meta?.flow_statistics)
    ) {
      //过滤可用的
      flow_statistics.value = cardDataObj.value.meta.flow_statistics.filter((item) => item.isUse);
      dataSource.value = flow_statistics.value;
      typeCodes.value = dataSource.value.map((item) => item.code).join(',');
    }
    serach();
  };

  const serach = () => {
    if (!typeCodes.value) return;
    isLoading.value = true;
    getFlowGetMiniStateByTypeCode({
      typeCode: typeCodes.value,
    })
      .then((res) => {
        const data = res;
        if ((isArray(data), data.length)) {
          data.forEach((item, index) => {
            dataSource.value[index].firstNum = item.processCount;
            dataSource.value[index].secondNum = item.finishedCount;
          });
        }
      })
      .finally(() => {
        isLoading.value = false;
      });
  };

  onMounted(fetch);
</script>
<style lang="less" scoped>
  :deep(.m-2) {
    margin: 0 !important;
  }

  .color {
    color: rgba(0, 0, 0, 0.6);
  }

  .num {
    font-weight: bold;
  }
</style>
